昨天我們已經完成我們的畫面了，接下來我們就要來將它轉變成在 Chrome 上打開的 Extension 囉~

安裝 CRXJS Vite Plugin

因為 Vite 本身沒有提供支援 Google Extension 的功能，這樣打包出來的 dist Chrome 也沒辦法辨認，所以我們需要安裝 CRXJS Vite Plugin 來協助開發。

開啟 terminal 並輸入指令：

npm i @crxjs/vite-plugin -D

打開 vite.config.js 並新增以下程式碼：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin' //新增
import tailwindcss from '@tailwindcss/vite'
import manifest from './manifest.json' //新增

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
    crx({ manifest })   //新增
  ],
})

補上一些缺失的檔案

我們在 manifest.json 有設定一些之後開發會用到的檔案，雖然現在還不會用到，但打包時如果沒有這些檔案，它會無法打包成功，所以我們先來補上一些檔案吧！

icons

在根目錄新增 icons 資料夾，並添加符合尺寸需求的二張圖片(檔名和 manifest.json 對的上就可以囉~)

mr-review-message/
 ...
 ├─ icons
     ├─ icon48.png
     └─ icon128.png"
 ...

當然，如果覺得不需要 icon 的話，不加也是可以，直接移除設定，這樣 chrome 會使用名字的第一個字當作圖像。

background.js

在根目錄新增一個空白的檔案，命名為 background.js 即可。

content_script.js

在根目錄新增一個空白的檔案，命名為 content_script.js 即可。

來打包吧！

我們可以開啟 terminal 並輸入指令：

npm run build

可以得到打包出來的資料夾 dist
而這個就是之後要給 Chrome Extension 載入的資料夾

來裝在 Chrome 中吧！

確認設定沒問題後，我們就來嘗試將 Extension 裝到 Chrome 中吧~

1. 打開 Chrome 瀏覽器，並前往 管理擴充功能(chrome://extensions/)
2. 打開右上方的開發人員模式，就會多出幾的按鈕
   
3. 點選載入封裝項目，選擇剛剛專案中的 dist 目錄
4. 就可以成功載入囉~
   
5. 現在，點擊 Extension 就可以看到昨天做的畫面了!